<template>
  <div class="renlian-dialog">
    <video ref="videoPlayer" src="https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/F469DF64-2ED1-1CFC-995E-948BD3CA6E96.mp4" autoplay loop></video>
  </div>
</template>
<script>
export default {
  name: "RenlianDialog",
  methods: {
    stopVideo() {
      console.log('尝试停止视频播放');
      const video = this.$refs.videoPlayer;
      if (video) {
        console.log('找到视频元素，准备停止');
        video.pause();
        video.currentTime = 0;
        console.log('视频已停止并重置');
      } else {
        console.log('未找到视频元素');
      }
    }
  },
  beforeDestroy() {
    console.log('组件即将销毁，调用 stopVideo');
    this.stopVideo();
  },
  mounted() {
    console.log('组件已挂载');
    this.$nextTick(() => {
      const video = this.$refs.videoPlayer;
      if (video) {
        console.log('视频元素已加载');
        video.addEventListener('pause', () => {
          console.log('视频暂停事件触发');
          video.currentTime = 0;
        });
      } else {
        console.log('未找到视频元素');
      }
    });
  }
}
</script>
<style scoped lang="scss">
.renlian-dialog {
  width: 900px;
  height: 500px;
  padding: 5px;
  video{
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }
}
</style>
